import React, { Component } from 'react';
import { connect } from 'react-redux';
import { 
  Card, 
  List, 
  Avatar, 
  Button, 
  Dialog, 
  Toast,
  Badge
} from 'antd-mobile';
import { MessageOutline, HeartOutline, StarOutline, SetOutline, RightOutline, CloseOutline, UserOutline } from 'antd-mobile-icons';
import { setUserInfo, clearUserInfo } from '../../store/reducers/userSlice';
import styles from './Profile.module.less';

class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showLogoutDialog: false,
      userStats: {
        posts: 12,
        followers: 128,
        following: 89,
        likes: 256
      }
    };
  }

  handleLogin = () => {
    const userInfo = {
      id: 1,
      name: '张三',
      avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80',
      email: 'zhangsan@example.com',
      phone: '138****8888'
    };
    
    this.props.dispatch(setUserInfo(userInfo));
    Toast.show('登录成功！');
  };

  handleLogout = () => {
    this.setState({ showLogoutDialog: true });
  };

  confirmLogout = () => {
    this.props.dispatch(clearUserInfo());
    this.setState({ showLogoutDialog: false });
    Toast.show('已退出登录');
  };

  cancelLogout = () => {
    this.setState({ showLogoutDialog: false });
  };

  render() {
    const { userInfo, isLoggedIn } = this.props;
    const { showLogoutDialog, userStats } = this.state;

    const menuItems = [
      {
        icon: <MessageOutline />,
        title: '我的消息',
        extra: <Badge content="3" color="#ff3141" />,
        color: '#1677ff'
      },
      {
        icon: <HeartOutline />,
        title: '我的收藏',
        extra: <RightOutline />,
        color: '#ff3141'
      },
      {
        icon: <StarOutline />,
        title: '我的点赞',
        extra: <RightOutline />,
        color: '#ff8f1f'
      },
      {
        icon: <SetOutline />,
        title: '设置',
        extra: <RightOutline />,
        color: '#666'
      }
    ];

    return (
      <div className={styles.container}>
        <div className={styles.content}>
          {/* 用户信息卡片 */}
          <Card className={styles.userCard}>
            {isLoggedIn ? (
              <div className={styles.userInfo}>
                <Avatar
                  src={userInfo.avatar}
                  style={{ '--size': '80px' }}
                />
                <div className={styles.userDetails}>
                  <h3 className={styles.userName}>{userInfo.name}</h3>
                  <p className={styles.userEmail}>{userInfo.email}</p>
                  <p className={styles.userPhone}>{userInfo.phone}</p>
                </div>
                <Button 
                  color="danger" 
                  size="small"
                  onClick={this.handleLogout}
                  className={styles.logoutBtn}
                >
                  <CloseOutline />
                  退出
                </Button>
              </div>
            ) : (
              <div className={styles.loginPrompt}>
                <Avatar
                  style={{ 
                    '--size': '80px',
                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
                  }}
                >
                  <UserOutline style={{ fontSize: '40px', color: 'white' }} />
                </Avatar>
                <div className={styles.loginText}>
                  <h3 className={styles.loginTitle}>欢迎使用</h3>
                  <p className={styles.loginSubtitle}>请登录以获取更好的体验</p>
                </div>
                <Button 
                  color="primary" 
                  onClick={this.handleLogin}
                  className={styles.loginBtn}
                >
                  立即登录
                </Button>
              </div>
            )}
          </Card>

          {/* 用户统计 */}
          {isLoggedIn && (
            <Card className={styles.statsCard}>
              <div className={styles.statsGrid}>
                <div className={styles.statItem}>
                  <div className={styles.statNumber}>{userStats.posts}</div>
                  <div className={styles.statLabel}>动态</div>
                </div>
                <div className={styles.statItem}>
                  <div className={styles.statNumber}>{userStats.followers}</div>
                  <div className={styles.statLabel}>粉丝</div>
                </div>
                <div className={styles.statItem}>
                  <div className={styles.statNumber}>{userStats.following}</div>
                  <div className={styles.statLabel}>关注</div>
                </div>
                <div className={styles.statItem}>
                  <div className={styles.statNumber}>{userStats.likes}</div>
                  <div className={styles.statLabel}>获赞</div>
                </div>
              </div>
            </Card>
          )}

          {/* 功能菜单 */}
          <Card className={styles.menuCard}>
            <List>
              {menuItems.map((item, index) => (
                <List.Item
                  key={index}
                  prefix={
                    <div 
                      className={styles.menuIcon}
                      style={{ color: item.color }}
                    >
                      {item.icon}
                    </div>
                  }
                  extra={item.extra}
                  onClick={() => {
                    if (item.title === '设置') {
                      Toast.show('设置功能开发中...');
                    } else {
                      Toast.show(`${item.title}功能开发中...`);
                    }
                  }}
                >
                  {item.title}
                </List.Item>
              ))}
            </List>
          </Card>

          {/* 应用信息 */}
          <Card className={styles.appInfoCard}>
            <div className={styles.appInfo}>
              <h4 className={styles.appInfoTitle}>应用信息</h4>
              <div className={styles.appInfoItem}>
                <span>版本号</span>
                <span>v1.0.0</span>
              </div>
              <div className={styles.appInfoItem}>
                <span>构建时间</span>
                <span>2024-01-01</span>
              </div>
              <div className={styles.appInfoItem}>
                <span>技术栈</span>
                <span>React 18 + Redux</span>
              </div>
            </div>
          </Card>
        </div>

        {/* 退出登录确认对话框 */}
        <Dialog
          visible={showLogoutDialog}
          content="确定要退出登录吗？"
          closeOnAction
          onClose={this.cancelLogout}
          actions={[
            {
              key: 'cancel',
              text: '取消',
              onClick: this.cancelLogout
            },
            {
              key: 'confirm',
              text: '确定',
              onClick: this.confirmLogout,
              danger: true
            }
          ]}
        />
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  userInfo: state.user.userInfo,
  isLoggedIn: state.user.isLoggedIn,
});

export default connect(mapStateToProps)(Profile);
